import React from 'react'
import { Menu, Badge } from 'antd'
import type { MenuProps } from 'antd'
import { Slide } from '../types'
import {
  HomeOutlined,
  FileTextOutlined,
  CodeOutlined,
  RocketOutlined,
  ExperimentOutlined,
  BulbOutlined,
  CheckCircleOutlined
} from '@ant-design/icons'

interface SlideNavigationProps {
  slides: Slide[]
  currentSlide: number
  onSelectSlide: (index: number) => void
}

const SlideNavigation: React.FC<SlideNavigationProps> = ({
  slides,
  currentSlide,
  onSelectSlide,
}) => {
  const getIcon = (type: string) => {
    switch (type) {
      case 'title':
        return <HomeOutlined />
      case 'overview':
        return <FileTextOutlined />
      case 'code':
        return <CodeOutlined />
      case 'demo':
        return <ExperimentOutlined />
      case 'comparison':
        return <RocketOutlined />
      case 'tips':
        return <BulbOutlined />
      default:
        return <CheckCircleOutlined />
    }
  }

  const items: MenuProps['items'] = slides.map((slide, index) => ({
    key: String(index),
    icon: getIcon(slide.type),
    label: slide.title,  // 直接使用字符串，让Ant Design处理显示
    onClick: () => onSelectSlide(index),
  }))

  return (
    <div className="bg-white/95 backdrop-blur rounded-lg p-4 h-full overflow-y-auto">
      <h3 className="text-lg font-semibold mb-4 text-gray-700">📚 目录导航</h3>
      <Menu
        mode="vertical"
        selectedKeys={[String(currentSlide)]}
        items={items}
        className="border-0"
        style={{ minWidth: '100%' }}
      />
    </div>
  )
}

export default SlideNavigation